<template>
    <LayoutWrap class="permission moduleChild">
        <el-form @submit.native.prevent ref="formSearch" :inline="true" :model="formSearch" label-width="80px">
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="关键词" prop="keyName">
                        <el-select
                            class="custom-the-select_key"
                            popper-class="custom-the-select-popper_key"
                            v-model="formSearch.keyName"
                            placeholder="请选择"
                            style="width: 105px;margin-right: 10px;"
                        >
                            <el-option
                                v-for="item in keyOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                        <br v-if="isMobile" />
                        <el-input
                            v-model="formSearch.keyValue"
                            placeholder="请输入关键字检索"
                            @keyup.enter.native="getList"
                            style="width: 180px"
                        ></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="  ">
                        <el-button type="primary" style="min-width: 120px;" @click="getList">查询</el-button>
                        <br v-if="isMobile" />
                        <el-button type="default" style="min-width: 120px;" @click="resetForm('formSearch')"
                            >重置</el-button
                        >
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <el-table
            v-loading="isLoading"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="meta.title" label="title"> </el-table-column>
            <el-table-column prop="meta.index" label="index">
                <template v-slot="{row}">
                    {{ row.meta.index ? row.meta.index : `""` }}
                </template>
            </el-table-column>
            <el-table-column prop="meta.icon" label="icon"> </el-table-column>
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="parentId" label="parentId"> </el-table-column>
            <el-table-column prop="path" label="path"> </el-table-column>
            <el-table-column prop="hidden" label="hidden">
                <template v-slot="{row}">
                    {{ row.hidden.toString() }}
                </template>
            </el-table-column>
            <el-table-column prop="redirect" label="redirect">
                <template v-slot="{row}">
                    {{ row.redirect ? row.redirect : `""` }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="name"> </el-table-column>
            <el-table-column prop="allows" label="allows">
                <template v-slot="{row}">
                    {{ row.allows.map(i => i.name).join(',') }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"> </el-table-column>
            <el-table-column align="center" label="操作">
                <template v-slot="{row}">
                    <el-button @click="onClickDetail(row)" type="text">
                        查看
                    </el-button>
                    <el-button @click="onClickEdit(row)" type="text">
                        编辑
                    </el-button>
                    <el-button @click="onClickDelete(row)" type="text">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination
            :page-size.sync="formSearch.pageSize"
            :page.sync="formSearch.page"
            :total="formSearch.count"
            @change="onChangePage"
        />
    </LayoutWrap>
</template>
<script>
import {getChildModules} from '@/api/permission';
import {mapGetters} from 'vuex';

export default {
    name: 'moduleChild',
    data() {
        return {
            formSearch: {
                keyName: 'meta.title',
                keyValue: '',
                pageSize: 10,
                page: 1,
                count: 0
            },
            keyOptions: [
                {label: 'meta.title', value: 'meta.title', disabled: false},
                {label: 'meta.icon', value: 'meta.icon', disabled: false},
                {label: 'id', value: 'id', disabled: false},
                {label: 'parentId', value: 'parentId', disabled: false},
                {label: 'path', value: 'path', disabled: false},
                {label: 'name', value: 'name', disabled: false},
                {label: 'remark', value: 'remark', disabled: false}
            ],
            tableData: [],
            isLoading: false
        };
    },
    computed: {
        ...mapGetters({
            isMobile: 'app/isMobile'
        })
    },
    created() {
        this.getList();
    },
    methods: {
        onChangePage(value) {
            this.formSearch = {...this.formSearch, ...value};
            this.getList();
        },
        resetForm(formSearch) {
            // this.$refs[formSearch].resetFields();
            const {keyName, keyValue, page, pageSize} = this.$options.data().formSearch;
            this.formSearch = {...this.formSearch, keyName, keyValue, page, pageSize};
        },
        handleSelectionChange() {},
        // 获取列表数据
        getList() {
            this.isLoading = true;
            const {keyName, keyValue, pageSize, page} = this.formSearch;
            const newItem = {pageSize, page};
            if (keyValue) {
                newItem[keyName] = keyValue;
            }
            getChildModules(newItem)
                .then(({data: res}) => {
                    if (res.status === 200) {
                        const {data, count, page, pageSize} = res;
                        this.tableData = data;
                        this.formSearch = {...this.formSearch, page, pageSize, count};
                    }
                })
                .catch(error => {
                    console.log(error);
                })
                .finally(() => (this.isLoading = false));
        },
        onClickDetail(row) {},
        onClickEdit(row) {},
        onClickDelete(row) {}
    }
};
</script>

<style lang="scss" scoped></style>
